<script setup>
  import NcTitle from './index.vue';
  const actions = [
    {
      id: 'add',
      text: '新增',
      iconName: 'button_add',
      attrs: {
        size: 'small'
      }
    },
    {
      id: 'update',
      text: '修改',
      iconName: 'button_update'
    }
  ];
  function handleClick(item) {
    console.log(item, 'item');
  }
</script>

<template>
  <div>
    <NcTitle title="基本带按钮的title" :actions="actions" />
    <NcTitle @action-click="handleClick" class="mt-10px" :is-show-fold="true" title="带内容的title" :actions="actions">
      <div>123445456354</div>
      <div>123445456354</div>
      <div>123445456354</div>
      <div>123445456354</div>
      <div>123445456354</div>
    </NcTitle>
    <NcTitle class="mt-10px" type="center" title="居中类型的title" :is-show-fold="true"> 基本信息 </NcTitle>
    <NcTitle class="mt-10px" :is-show-left-line="false" title="取消左侧竖线" />
    <NcTitle
      class="mt-10px"
      :is-show-left-line="false"
      :is-show-border-bottom="false"
      title="取消下边框"
      :actions="actions"
    />
    <NcTitle title="内容拥有padding" class="pt-10px" has-padding> 123123 </NcTitle>
    <NcTitle title="更多" class="pt-10px" has-padding has-more>
      <div class="h-50px">123445456354</div>
      <div class="h-50px">123445456354</div>
      <div class="h-50px">123445456354</div>
      <div class="h-50px">123445456354</div>
      <div class="h-50px">123445456354</div>
    </NcTitle>
  </div>
</template>

<style scoped lang="scss"></style>
